<div id="place" class="place">
    <div id="place-container" class="place-container">
        <!-- #viewer is used to control zooming. -->
        <div id="place-viewer" class="place-viewer">
            <!-- #camera is used to control camera positioning -->
            <div id="place-camera" class="place-camera">
                <canvas id="place-canvasse" class="place-canvas"></canvas>
            </div>
        </div>
        <button id="place-mute-button" class="place-mute-button place-uninitialized"></button>
        <button id="place-notification-button" class='place-notification-button place-uninitialized'></button>
        <button
          id="place-zoom-button"
          class="place-zoom-button place-zoomed-out place-uninitialized">
          <div id="place-zoom-pulse" class="place-zoom-pulse"></div>
        </button>

        <button id="place-camera-button" class="place-camera-button"></button>
        <div class="place-bottom-toolbar">
            <!-- This will be a holding container for swatches generated in js -->
            <div id="place-palette" class="place-palette place-uninitialized">
                <div id="place-molly-guard" class="place-molly-guard place-uninitialized"></div>
            </div>
            <div id="place-activity-count" class="place-activity-count place-uninitialized"></div>
            <div id="place-coordinates" class="place-coordinates place-uninitialized"></div>
            <!-- This will be used to display information about specific tiles -->
            <div id="place-inspector" class="place-inspector">
            </div>
        </div>
        <!-- This will be used to display the cooldown timer -->
        <div id="place-timer" class="place-timer">
        </div>
    </div>
    <div id="place-hand-cursor" class="place-hand-cursor"></div>
    <!-- This will be the cursor element that displays the current color -->
    <div id="place-hand" class="place-hand">
        <div id="place-hand-swatch" class="place-hand-swatch"></div>
    </div>
</div>
